<template>
	<view class="page">
		<view class="wrapper" v-if="JSON.stringify(course)!='{}'">
			<view class="header" @click="schedule()">
				<view class="f_40"  :style="'color:' + statusColor(course.status,course.is_start)">
						<text>{{course.status==3?(course.is_start?'授课中':'课程未开始'):course.status==2?'预约上课':course.status==4?'课次已完成':course.status==5?'退款申请中':course.status==6?'退款失败':course.status==7?'退款成功':''}}</text>
						<image class="next_icon" :src="course.status == 3 ? (course.is_start ? imgPrefix('/static/image/icon/next_orange.png') : imgPrefix('/static/image/icon/address_next.png')) :
						(course.status == 3 ? imgPrefix('/static/image/icon/next.png'):imgPrefix('/static/image/icon/address_next.png'))"></image>
						</view>
				<view class="surplus f_24" >
					课程<text>{{course.index}}/{{course.course_order.num}}</text>，剩余<text>{{course.surplus}}</text>课次，要继续加油噢
				</view>
			</view>
			<!-- 课程信息 -->
			<view class="course_info">
				<view class="title navy_blue f_32">课程信息</view>
				<view class="info dis-flex flex-y-center" @click="pageTo('/pages/teacher_detail/index',{id:course.teacher_course_id})">
					<view class="headeravatar"><image :src="course.teacher!=null?course.teacher.headeravatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill"></image></view>
					<view class="dis-flex flex-x-between flex-y-center flex-box">
						<view class="">
							<view class="f_32 navy_blue">
								{{course.course_order.language_grade}}{{course.course_order.language}}{{course.teacher!=null?course.teacher.nickname:''}}
							</view>
							<view class="gery1 dis-flex course_count f_24" v-if="course.teacher!=null">
								<view class="m_r_10">教龄<text class="navy_blue">{{course.teacher.teaching_year}}</text>年</view> 
								<view class="m_r_10">已授<text class="navy_blue">{{course.teacher.course_count}}</text>课</view>
							</view>
						</view>
						<view class="icon">
							<image :src="imgPrefix('/static/image/icon/next.png')"></image>
						</view>
					</view>
				</view>
				<view class="course_type">
					<view class="dis-flex flex-x-between f_28 gery1 ">
						<text>课程语种</text>
						<text class="navy_blue">{{course.course_order.language}}</text>
					</view>
					<view class="dis-flex flex-x-between f_28 gery1">
						<text>授课方式</text>
						<text class="navy_blue">{{course.course_order.classdata==1?'教师上门':'学生上门'}}</text>
					</view>
					<view class="dis-flex flex-x-between f_28 gery1">
						<view>地址信息</view>
						<view class="navy_blue t-r">
							<view class="address onelist-hidden">{{course.course_order.address}}</view>
							<view class=""><text>{{course.course_order.username}}{{course.course_order.phone}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 授课时间 -->
			<view class="course_time dis-flex flex-x-between f_28 gery1 flex-y-center">
				<view>授课时间</view>
				<view class="violet1 dis-flex flex-y-center" @tap="bindSelectTime" v-if="course.status==2">
					<block v-if="seletTime!=''">{{seletTime}}</block>
					<block v-else>预约上课时间 <image class="next_icon" :src="imgPrefix('/static/image/icon/address_next.png')"></image></block>
				</view>
				<view class="violet1" v-else><text>{{course.date}}{{course.week}}</text><text>{{course.time}}</text></view>
			</view>
			<!-- 上课位置,学生上门才有显示 -->
			<view class="course_address" v-if="course.course_order.classdata==2">
				<view class="title navy_blue f_32">上课位置</view>
				<view class="dis-flex flex-y-center flex-x-between address_box">
					<view class="dis-flex flex-y-center">
						<view class="address">
							<image :src="imgPrefix('/static/image/icon/address.png')"></image>
						</view>
						<view class="f_24">
							<view class="address_detail onelist-hidden">{{course.course_order.address}}</view>
							<view class="">
								<text>{{course.course_order.username}}</text>
								<text>{{course.course_order.phone}}</text>
							</view>
						</view>
					</view>
					<view class="navigation_icon violet1 f_24 dis-flex flex-y-center" @tap.stop="address2Location(course.course_order.address)">
						<text>导航</text><image :src="imgPrefix('/static/image/icon/address_next.png')"></image>
					</view>
				</view>
			</view>
			<!-- course.status,course.is_start -->
			<fixed-bottom>
				<view class="btn_box t-c">
					<view class="btn" @click="accomplish(course.status,course.is_start)" :class="'bg_'+btnColor(course.status,course.is_start)" v-if="course.status==2||course.status==3">{{course.status==2?'预约老师':'课程完成' }}</view>
				</view>
			</fixed-bottom>
		</view>
		<zan-popup :show="showCourse" type="bottom" @close="closeCoursePopup">
			<view class="schedule-list-box">
				<view class="title t-c f_32">
					课程进度
					<image @click="closeCoursePopup" :src="imgPrefix('/static/image/icon/address_close.png')"></image>
				</view>
				<view v-if="course.index==1&&scheduleList.length==0" class="item dis-flex flex-x-between f_26 color0">
					<view class="dis-flex flex-x-between status-box flex-y-center">
						<text :class="['li','b_g_violet1']"></text>
						<text>课次未预约</text>
						<text>1/{{course.num}}</text>
					</view>
				</view>
				<view v-else v-for="(item, index) in scheduleList"
					:key="index"
					:class="['item', 'dis-flex', 'flex-x-between', 'f_26', item.status == 3||course_count==0 ? 'color0' : item.status == 1 ? 'gery1' : 'navy_blue']"
				>
					<view class="dis-flex flex-x-between status-box flex-y-center">
						<text :class="['li', course_count==0||item.status == 3 ? 'b_g_violet1' : item.status == 1 ? 'b_g_gery1' : 'b_g_navy_blue']"></text>
						<text>课次{{ course_count==0?'未预约':item.status == 3 ? '未开始' : '已完成' }}</text>
						<text>{{ item.index }}/{{course_count}}</text>
					</view>
					<view class="dis-flex flex-x-between date">
						<block v-if="course_count!=0">
							<text>{{ item.date }}/{{ item.week }}</text>
							<text>{{ item.time }}</text>
						</block>
					</view>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { inverseAddressResolution } from '@/static/mixins/inverseAddressResolution.js';
import zanPopup from '@/components/popup/index.vue';
import API from '@/static/api/index.js';
import {format } from '@/static/uitls/common.js';
const app = getApp();
	export default {
		mixins: [commonMixinFun,inverseAddressResolution],
		components: {
			zanPopup
		},
		data() {
			return {
				course_count:'',//总课次
				scheduleList:[],//课程进度
				seletTime:'',
				bindDayList:{},
				showCourse: false, //是否弹出层
				course_id:'',//课程id
				course:{},
				isRequest:false
			};
		},
		onLoad(options){
			this.course_id=options.course_id
			//请求数据
			this._courseRead()
		},
		onShow() {
			uni.$on('watchArr', res => {
			   //监听选择列表变化
			   app._log(res)
			   this.bindDayList = res.bindDayList
			   // 清除监听
			   uni.$off('watchArr');
			  });
		},
		computed:{
			timeObj(){
				let {selectedList}=this
				let selectArr = selectedList.length>0?selectedList.filter(o=>o.times.length>0):[];
				if(selectArr.length==0){
					return []
				}else{
					app._log("selectArr.date,",selectArr)
					app._log("new Date(selectArr.date)",new Date(selectArr[0].date))
					this.seletTime=format(new Date(selectArr[0].date), 'yyyy/MM/dd') + ' 周' + '日一二三四五六'.charAt(new Date(selectArr[0].date).getDay()) +"  "+ selectArr[0].times[0];
					return selectArr
				}
			},
			
			btnColor(){
				return function(status,is_start){
					// app._log("is_start:",status,is_start)
					let className=''
					if(status==3){
						if(is_start){
							// app._log("is_start:",status,is_start)
							//授课中
							className="schooling"
						}else{
							//未开始
							className="dns"
						}
					}else if(status==2){
						//待预约
						if(this.seletTime!=''){
							className="schooling"
						}else{
							className="dns"
						}
					}
					return className
				}
			},
		selectedList: function() {
			// 已经选择了的时间列表
			let { bindDayList } = this;
			
			let dkeysSorted = Object.keys(bindDayList).sort((a, b) => {
				return new Date(a) - new Date(b);
			});
			let newD = [];
			dkeysSorted.forEach((e, i) => {
				let obj = { date: e, times: [] };
				let { selectTimeList } = bindDayList[e];
				let tkeysSorted = Object.keys(selectTimeList).sort((a, b) => {
					return new Date(e + ' ' + selectTimeList[a].split(':')[0] + ':00') - new Date(e + ' ' + selectTimeList[b].split(':')[0] + ':00');
				});
				// app._log(tkeysSorted)
				tkeysSorted.forEach((te, ti) => {
					obj.times.push(selectTimeList[te]);
				});
				newD.push(obj);
			});
			return newD;
		}
		},
		methods:{
			bindSelectTime(){
				let {course,bindDayList,selectedList}=this;
				let {teacher_course_id,teacher_id,course_order} = course
				let {hour}=course_order;
				let selectArr = selectedList.length>0?selectedList.filter(o=>o.times.length>0):[];
				app._log(selectArr)
				if(selectArr.length>0){
					app._log('走哪了1')
					uni.$emit("watchDay",{day:selectArr[0].date});
				}
				this.pageTo('/pages/select_time/index',{bindDayList:JSON.stringify(bindDayList),courseNum:1,teacher_id:teacher_id,teacher_course_id:teacher_course_id,hour:hour,isView:true})
			},
			//完成课程
			accomplish(status,is_start){
				if(status==3&&is_start){
					uni.showModal({
					    title: '提示',
					    content: '确定完成该课程吗？',
					    success: res=> {
					        if (res.confirm) {
					            //可以完成课程
					            if(status==3&&is_start){
					            	API.viewCourseFinish(this.course.course_id).then(res=>{
					            		if(res.code==1){
											this.showToast('操作成功','success')
											setTimeout(()=>{
												this._courseRead()
											}, 2000);
					            		}else{
					            			this.showToast(res.msg)
					            		}
					            	})
					            }
					        }
					    }
					});
				}else if(status==2){//预约老师
					app._log("预约老师");
					if(this.seletTime==''){
						this.showToast('请选择预约时间')
					}else{
						app.requestSubscribeMessage('course_success',()=>{
							let {course,timeObj} = this
							let obj={
								course_id:course.course_id,
								date:timeObj[0].date,
								time:timeObj[0].times[0]
							}
							API.courseReservation(obj).then(res=>{
								if(res.code==1){
									app.requestSubscribeMessage('appointment')
									this.showToast('预约成功','success')
									setTimeout(()=> {
										this._courseRead()
									}, 2000);
								}else{
									this.showToast(res.msg||'请稍后再试')
								}
							}).catch(err=>{
								this.showToast('请稍后再试')
							})
						})
					}
				}
			},
			statusColor(status,is_start){
				// <text>{{course.status==3?(course.is_start?'授课中':'课程未开始'):course.status==2?'预约上课':item.status==4?'课次已完成':''}}</text>
				let color=''
				let {course} = this
				if(status==3){
					if(is_start){
						//授课中
						color="#ffa63e";
					}else{
						//未开始
						color="#7f4aff"
					}
				}else if(status==2){
					//待预约
					color="#7f4aff"
				}else if(status==4){
					//已完成
					color="rgba(37, 39, 72, 0.8)"
				}
				return color;
			},
			_courseRead(){
				let {isRequest} = this
				if(!isRequest){
					isRequest=true
					API.courseRead(this.course_id).then(res=>{
						if(res.code==1){
							this.course=res.data.course
						}else{
							this.course={}
							this.showToast(res.msg);
						}
						isRequest=false
					}).catch(err=>{
						isRequest=false
						this.course={}
					})
				}
			},
			//查看进度
			schedule(){
				//相等就查看全部,
				this.closeCoursePopup()
				if(this.course.index==1&&this.course.date==''){
				}else{
					if(this.course.course_count==this.course.num){
						API.courseDegree(this.course.course_order_id).then(({code,data,msg})=>{
							if(code==1){
								this.scheduleList=data.course
								this.course_count=data.course_count
							}else{
								this.scheduleList=[]
								this.showToast(msg)
							}
						})
					}else{//不等就查看预约进度
						API.courseReserve(this.course.course_order_id).then(({code,data,msg})=>{
							if(code==1){
								this.scheduleList=data.course
								this.course_count=data.course_count
							}else{
								this.scheduleList=[]
								this.showToast(msg)
							}
						})
					}
				}
				
			},
			
			closeCoursePopup(delay = 0) {
				setTimeout(() => {
					this.showCourse = !this.showCourse;
				}, delay);
			},
		}
	}
</script>

<style scoped lang="scss">
.wrapper{
	.header{
		padding: 26rpx 48rpx;
		.next_icon{
			margin-left: 6rpx;
			width: 32rpx;
			height: 32rpx;
		}
		.surplus{
			margin-top: 12rpx;
			text{
				color: #7f4aff;
			}
			view{
				margin-right: 10rpx;
			}
		}
	}
	.course_info{
		background-color: white;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:0 24rpx ;
		margin: 0 48rpx 16rpx 48rpx;
		.title{
			padding: 16rpx 0;
			border-bottom:1px solid #f2f2f2;
		}
		.info{
			border-bottom:1px solid #f2f2f2;
			padding: 26rpx 0;
			.headeravatar{
				image{
					width: 96rpx;
					height: 96rpx;
					margin-right: 16rpx;
					border-radius: 24rpx;
				}
			}
			.icon{
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.m_r_10{
				margin-right: 10rpx;
			}
			.course_count{
				margin-bottom: 10rpx;
			}
		}
		.course_type{
			padding: 18rpx;
			// .language_title{
			// 	margin-bottom: 26rpx;
			// }
			view{
				margin-bottom: 26rpx;
			}
			.address{
				width: 400rpx;
			}
		}
	}
	.course_time{
		margin: 0 48rpx 16rpx 48rpx;
		height: 104rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		text{
			margin-right: 10rpx;
		}
		.next_icon{
			width: 32rpx;
			height: 32rpx;
			}
	}
	.bg_schooling{
		background: #7f4aff;
		color: white;
	}
	.bg_dns{
		background: #f0f0f6;
		color: #252748;
		opacity: 0.5;
	}
	.btn_box{
		line-height: 92rpx;
		width: 100vw;
		.btn{
			margin: 0 48rpx;
			border-radius: 24rpx;
		}
	}
	.course_address{
		background-color: white;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding:0 24rpx;
		margin: 16rpx 48rpx;
		.title{
			padding: 16rpx 0;
			border-bottom:1px solid #f2f2f2;
		}
		.address{
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.address_detail{
			width: 450rpx;
			margin-bottom: 10rpx;
		}
		.navigation_icon{
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.address_box{
			padding:26rpx 0 ;
		}
	}
}
.course_type>view:last-child{
	margin-bottom:0!important;
}

.schedule-list-box {
	width: 750rpx;
	background: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	height: 664rpx;
	overflow-y: scroll;
	.li {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		position: relative;
	}
	.title {
		line-height: 92rpx;
		position: relative;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 48rpx;
			top: 30rpx;
		}
	}
	.color0 {
		color: #7f4aff;
	}
	.item {
		padding: 0 48rpx 42rpx 48rpx;
		.status-box {
			width: 35%;
		}
		.date {
			width: 60%;
		}
	}
}
.li::after {
	content: '';
	height: 60rpx;
	width: 10rpx;
	position: absolute;
	bottom: -60rpx;
	left: 2px;
}
.b_g_violet1::after {
	border-left: 1rpx dashed #7f4aff;
}
.b_g_gery1::after {
	border-left: 1rpx dashed #8f8f9a;
}
.b_g_navy_blue::after {
	border-left: 1rpx dashed #1f2633;
}
.item:last-of-type .li::after {
	content: '' !important;
	height: 0 !important;
	width: 0 !important;
}
</style>
